<template>
    <div>
		<myheader></myheader>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas="datas"></Breadcrumb>

		
	<section class="featured-block text-center">
		
		<div class="container"> 
			<table>
				<tr	>
					<td>用户名：</td>
					<td><input type="text" name="username" id="" v-model="username"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="text" name="password" id="" v-model="password"></td>
				</tr>
				<tr>
					<td>验证码：</td>
					<td><input type="text" name="" id="" v-model="code" ></td>
				</tr>
				<tr>
					<td></td>
					<td><img :src="src" alt="" @click="changeimg"></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<Button @click="submit">注册</Button>
						<Button @click="reset" color='green'>重置</Button>
					</td>
				</tr>
			</table>
		</div>
	</section>
		<myfooter></myfooter>
    </div>
</template>


<script>
import myheader from './myheader'
import myfooter from './myfooter'
export default {
	name:"reg",
	components:{
		'myheader':myheader,
		'myfooter':myfooter,
	},
    data () {
    return {
		msg: "这是一个变量",
		datas:[{title:'首页',route:{name:'index'}},
				{title:"注册页面"}
				],
		username:'',
		password:'',
		code:'',
		src:'http://127.0.0.1:8000/code/',

    }
    },
    mounted:function(){

	},
	methods:{
		submit(){
			if (this.username == '') {
				this.$Message("用户名不能为空！")
				return false
			}
			if (this.password == "") {
				this.$Message('密码不能为空！')
				return false
			}
			this.axios({
				url:'http://127.0.0.1:8000/reg/',
				params:{
					username:this.username,
					password:this.password,
					code:this.code
				},
			}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message)
			}).catch(error=>{
				console.log(error)
			})
		},
		reset(){
			this.username = ''
			this.password = ''
			this.code = ''
		},
		changeimg(){
			var num = Math.ceil(Math.random()*10);
			//赋值给src
			this.src = this.src + '?code='+num;
		}
    },
}


</script>


<style>
	td{padding: 5px;}


</style>